<template>
  <div class="main">
      <div class="content">
        <el-row :gutter="30">
          <el-col :span="16"><div class="grid-content bg-purple">
              <div class="productbox">
   <h1>相关产品</h1>
                <div class="prodectdetail" v-if="product.length != 0"  v-for="(item,index) in product" :key="index">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <div class="grid-content bg-purple">
                       
                          <div class="productinfo">
                              <h1>{{item.name}}</h1>
                              <div class="productdetailinfo">
                                <el-row :gutter="20">
                                <el-col :span="6"><div class="grid-content">
                                    <h2>{{item.productCategory}}</h2>
                                    <p>产品所属分类</p>
                                  </div></el-col>
                                <el-col :span="6"><div class="grid-content">
                                     <h2>{{item.investDirect}}</h2>
                                    <p>投资领域</p>
                                  </div></el-col>
                                <el-col :span="6"><div class="grid-content">
                                     <h2>{{item.beginMoney}}</h2>
                                    <p>认购起点</p>
                                  </div></el-col>
                                <el-col :span="6"><div class="grid-content">
                                    <h2>{{item.yearEarningsRate}}</h2>
                                    <p>年化收益率</p>
                                  </div></el-col>
                              </el-row>
                              </div>
                              <h3 class="goode">收益说明: <span v-html="item.incomeExplain"></span></h3>
                          </div>
                        </div></el-col>
                      <el-col :span="6"><div class="grid-content bg-purple">
                          <div class="productbutton">
                              <nuxt-link :to="'/product/'+ item.pid">
                              <el-button class="detailbutton">查看详情</el-button> 
                              </nuxt-link>
                          </div>
                        </div></el-col>
                    </el-row>
                </div>
                <div class="noprodect" v-if="product.length == 0">
                  <i class="el-icon-error"></i>没有找到相关产品
                </div>
                <div class="newdetail">
                  <h1>相关资讯</h1>
                    <ul>
                      <li class="newsdetail" v-for="(item,index) in newsBox" :key="index">
                           <nuxt-link :to="'/post/' + item.pid"><span>{{item.name}}</span></nuxt-link>                          
                           <span>{{item.createtime.slice(0,10)}}</span>
                      </li>
                    </ul>
                </div>    
                 <div class="noprodect" v-if="newsBox.length == 0">
                  <i class="el-icon-error"></i>没有找到相关资讯
                </div>
          
          
          </div>
                      </div></el-col>

          <el-col :span="8"><div class="grid-content bg-purple-light">
                <div class="newsBox">
                    <div>
                         <div class="newsBox">
                    <h1>投资内参</h1>
                    <div>
                        <div class="newBoxDetali" v-for="(item,index) in newsDetail" :key="index">
                                <div class="newimg">
                                     <img :src="item.thumbnail" alt="">
                                </div>
                                <div class="newinfo">
                                  <nuxt-link :to="'/post/' + item.pid"><a>{{item.name}}</a></nuxt-link>
                                  <p><span>发布时间：</span><span>{{item.createtime}}</span></p>
                                </div>
                        </div>
                    </div>
                </div>

                    </div>
                </div>
            </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>


<script>
import asyncApi from '../../../static/js/asyncApi.js'
import api from '../../../static/js/api.js'

export default {
  data() {
    return {
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      radio4: "不限",
      radio5: "不限",
      radio6: "不限",
      newsBox:{},
      product:{},

      postdata1:"",
      postdata2:"",
      postdata3:"",
      postdata4:"",
      postdata5:"",
      postdata6:""      
    };
  },
  watch:{
   "$route" :"loadMoive"
  },
  methods:{
    getSearch(value){
        api.search({kw:value,token:this.$store.state.userinfo.token}).then((res) =>{
          if(res.code == 1){
            this.newsBox = res.data.postList
            this.product = res.data.productList
          }
        })
    },
    loadMoive(val){
      this.getSearch(val.params.id)
    },
  },
  created:function(){
    this.getSearch(this.$route.params.id)
  }, 
  async asyncData () {
    let [data1] = await Promise.all([
        asyncApi.asyncGetCategoryPost({categoryName:"财经头条",page:"1",pageSize:"10"})
    ])
    return {
      newsDetail:data1.data.data.list
      }
 },
};
</script>

<style scoped>
.newdetail{
  margin-top: 30px;
}
.goode{
  height: 40px;
  line-height: 20px;
  overflow: hidden;
     text-overflow: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.noprodect{
  height: 160px;
  line-height: 160px;
  text-align: center;
  font-size: 22px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.newsdetail{
  width: 100%;
  display: flex;
  height: 40px;
  border-bottom:1px solid #ccc; 
  line-height: 40px;
  justify-content: space-between;
  font-size: 14px;
}
.newsdetail span:nth-child(1){
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
     text-overflow: none;
}
.newBoxDetali{
  height: 140px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newimg {
  width: 40%;
  height: 100px;
  float: left;
  margin-top: 10px;
}
.newinfo {
  width: 60%;
  float: left;
  padding: 0 10px;
  margin-top: 10px; 
}
.newinfo a{
  display: inline-block;
  width: 220px;
  padding-right: 20px;
   overflow: hidden;
     text-overflow: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}
.newcontent{
    text-indent: 2rem;
 overflow: hidden;
   text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  color: #555557;
}
.newimg img {
  width: 100%;
  height: 100%;
}
.detailbutton{
  background: #b41d24;
  color: white;

}
.newsBox {
  margin-top: 20px;
}
.newsBox h1 {
  color: black !important;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.newsBox h1 a{
  font-size: 12px;
}

.productbutton {
  margin: 70px 30px 0;
}
.productdetailinfo {
  padding: 30px 0 10px;
}
.productdetailinfo .grid-content {
  text-align: center;
}
.productdetailinfo .grid-content h2 {
  color: #555557;
  font-size: 18px;
}
.productdetailinfo .grid-content p {
  color: #c9c9ca;
  font-size: 14px;
  margin-top: 10px;
}
.productinfo {
  border-right: 1px solid #dddddd;
}
.productinfo h1 {
  margin: 20px 0 0 20px;
  color: #555557 !important;
  font-size: 22px;
  font-weight: bolder !important;
}
.productinfo h3 {
  color: #555557;
  margin-left: 20px;
}
.prodectdetail {
  width: 100%;
  border-bottom: 1px solid #dddddd;
}
.prodectdetail:hover {
  background: #f2f2f2;
}

.main {
  background: white;
  max-width: 1400px;
  width: 90%;
  margin: 20px auto;
  padding: 20px 20px;
}
.main h1 {
  font-size: 20px;
  line-height: 30px;
  color: #b41d24;
  font-weight: normal;
}
.checkBox {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 0 20px 20px;
}
.checkDetail {
  margin-top: 20px;
}
.checkDetail span {
  padding-right: 5px;
  color: black;
  font-size: 16px;
  line-height: 26px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
